<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <form>
        <p>姓名：<input type="text" v-model="username"></p>
        <p>城市：
            <select v-model.number="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">大连</option>
                <option value="4">无锡</option>
                <option value="5">南白滩</option>
            </select>
        </p>
        <p>性别：
            <input v-model="sex" type="radio" :value="1">男
            <input v-model="sex" type="radio" :value="2">女
        </p>
        <p>爱好：
            <input v-model.number="hobby"  type="checkbox" value="1">编程
            <input v-model.number="hobby"  type="checkbox" value="2">学习
            <input v-model.number="hobby"  type="checkbox" value="3">丰满
            <input v-model.number="hobby"  type="checkbox" value="4">足球
        </p>
        <button @click.prevent="submitHandler">提交</button>
    </form>
</div>
</body>
<script>
	// 表单相关：
	// 1- 如何设置表单的初始值
	// 2- 如何收集最新的表单数据
	new Vue({
		el: "#root",
		data: {
			username: "zhangsan",
            city:2,
            sex:1,
            hobby:[1,2,3]
		},
		methods: {
			submitHandler() {
				console.log("username:", this.username);
				console.log("city:", this.city);
				console.log("sex:", this.sex);
				console.log("hobby:", this.hobby);
			}
		}
	})
</script>
</html>